<template>
    <div>
        <a-modal v-model:visible="visible" @ok="handleOk" :width="modalWidth" :wrap-class-name="isExpand ? 'full-modal' : ''">
            <template #title>
                <a-row>
                    <a-col :span="21">{{ title }}</a-col>
                    <a-col :span="3">
                        <view style="float: right;margin-right:40px;" v-if="isExpand">
                            <CompressOutlined @click="tapCompress" style="color: grey;" />
                        </view>
                        <view style="float: right;margin-right:40px;" v-else>
                            <ExpandAltOutlined @click="tapExpand" style="color: grey;" />
                        </view>  
                    </a-col>
                </a-row>
            </template>
            <template #footer>
              
            </template>
            <slot v-if="visible || keepSlot">
                <p>Slot</p>
            </slot>
        </a-modal>
    </div>
</template>
<script setup>
import { ExpandAltOutlined, CompressOutlined } from '@ant-design/icons-vue'
const emit = defineEmits(['confirm'])
const props = defineProps({
    title: {
        type: String,
        default: '测试标题'
    },
    width:{
        type:[Number,String],
        default:520
    },
    // 是否保持组件状态
    keepSlot:{
        type:[Boolean,Number],
        default:false
    }
})
const visible = ref(false)
const loading = ref(false)
const isExpand = ref(false)

const modalWidth = computed({
    get: () => {
        if (isExpand.value) {
            return '100%'
        } else {
            return props.width
        }
    }
});

// 点击拓展
function tapExpand() {
    isExpand.value = true
}
function tapCompress(){
    isExpand.value = false
}
// 
function openModal(){
    visible.value = true
}
function closeModal(){
    visible.value = false
    handleCancel()
}
function handleCancel(){
    // 延迟配置
    setTimeout(function(){
        isExpand.value = false
        loading.value = false
    },600)
}

defineExpose({
    openModal,
    closeModal
})
</script>
<style lang="scss">
.full-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
        height: 100%;
    }

    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }

    .ant-modal-body {
        flex: 1;
    }
}</style>